<template>
  <div class="con-right fr">
    <el-carousel :autoplay="false" :indicator-position="false" :loop="true" arrow="never" ref="carousel"
      v-if="selfAdaption">
      <el-carousel-item v-for="(item, index) in ListByProdect" :key="index" @change="handleParkOverview">
        <div class="right-top" ref="rightTop" v-if="isgarden != 1">
          <div class="info-title" @click="handleParkOverview(index)">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName"><span>平台概览</span></div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <div class="info1 display_flex3 space-around align-items">
            <div class="display_flex3 align-items">
              <span class="previewTitle"><span>园区概览</span></span>
              <div class="previewNum" v-for="(item1, index1) in garden" :key="index1">
                <span>{{ item1 }}</span>
              </div>
            </div>
            <div class="display_flex3 align-items">
              <span class="previewTitle"><span>场景概览</span></span>
              <div class="previewNum" v-for="(item1, index) in scene" :key="index">
                <span>{{ item1 }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right-top1" ref="rightTop" v-if="isgarden != 1">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName"><span>告警事件统计</span></div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <warning-Echartas v-if="warningEchartasShow" :pseudoData="item.pseudoDataDTO"></warning-Echartas>
        </div>
        <div class="right-center" @change="handleParkOverview">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName"><span>发电量情况</span></div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <div class="info1">
            <div class="tlbox">
              <div class="display_flex3">
                <div class="tlboxModel">
                  <p class="text">
                    <span class="w12">当日发电量</span>
                  </p>
                  <div class="rwith">
                    <div>
                      <span class="rwith_img" style="width: 40%"></span>
                    </div>
                    <span class="value">{{ generatedEnergy.curPowerData }}kwh</span>
                  </div>
                </div>
                <div class="tlboxModel">
                  <p class="text">
                    <span class="w12">当月发电量</span>
                  </p>
                  <div class="rwith">
                    <div>
                      <span class="rwith_img" style="width: 40%"></span>
                    </div>
                    <span class="value">{{ generatedEnergy.curMonthPowerData }}kwh</span>
                  </div>
                </div>
              </div>
              <div class="display_flex3">
                <div class="tlboxModel">
                  <p class="text">
                    <span class="w12">当年发电量</span>
                  </p>
                  <div class="rwith">
                    <div>
                      <span class="rwith_img" style="width: 40%"></span>
                    </div>
                    <span class="value">{{ generatedEnergy.curYearPowerData }}kwh</span>
                  </div>
                </div>
                <div class="tlboxModel">
                  <p class="text">
                    <span class="w12">累计发电量</span>
                  </p>
                  <div class="rwith">
                    <div>
                      <span class="rwith_img" style="width: 40%"></span>
                    </div>
                    <span class="value">{{ generatedEnergy.totalPowerData }}kwh</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-bottom">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName">碳排放</div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <div class="info1">
            <div class="daterange">
              <div>
                <el-button-group>
                  <el-button type="primary" :class="
                    active_data == 1 ? 'button_date_active' : 'button_date'
                  " @click.stop="handledata(1)">当日</el-button>
                  <el-button type="primary" :class="
                    active_data == 2
                      ? 'button_date_active'
                      : 'button_date borderright'
                  " @click.stop="handledata(2)">当月</el-button><el-button type="primary" :class="
  active_data == 3
    ? 'button_date_active'
    : 'button_date borderright'
" @click.stop="handledata(3)">当年</el-button>
                </el-button-group>
              </div>
            </div>
            <div class="model_box">
              <div class="display_flex3 el_table100">
                <div class="positionRelative flex1">
                  <div class="position width90">
                    <div class="fontSize16 colorblue3 line-height">
                      {{
                        active_data == 1
                        ? initHomePower.todayPowerData
                        : active_data == 2
                          ? initHomePower.totalCurMonthPowerData
                          : initHomePower.totalCurYearPowerData
                      }}
                    </div>
                    <div class="colorfff fontSize12 line-height">
                      {{
                        active_data == 1
                        ? "今日用电(kwh)"
                        : active_data == 2
                          ? "当月用电(kwh)"
                          : "当年用电(kwh)"
                      }}
                    </div>
                    <img class="carbonicon" align="center" src="../../assets/img/carbonicon1.png" />
                  </div>
                  <div class="carbonEmission">
                    <img src="../../assets/img/carbonEmission1.png" />
                  </div>
                </div>
                <div class="positionRelative flex1">
                  <div class="position width90">
                    <div class="fontSize16 colorblue3 line-height">
                      {{
                        active_data == 1
                        ? initHomePower.yesterdayPowerDataSameTerm
                        : active_data == 2
                          ? initHomePower.totalLastMonthPowerSameTermData
                          : initHomePower.totalLastYearPowerData
                      }}
                    </div>
                    <div class="colorfff fontSize12 line-height white-space">
                      {{
                        active_data == 1
                        ? "昨日同期用电(kwh)"
                        : active_data == 2
                          ? "上个月同期用电(kwh)"
                          : "去年同期用电(kwh)"
                      }}
                    </div>
                    <img class="carbonicon" align="center" src="../../assets/img/carbonicon3.png" />
                  </div>
                  <div class="carbonEmission">
                    <img src="../../assets/img/carbonEmission1.png" />
                  </div>
                </div>
                <div class="positionRelative flex1">
                  <div class="position width90">
                    <div class="fontSize16 colorblue3 line-height">
                      {{
                        active_data == 1
                        ? initHomePower.todayCarbonCount
                        : active_data == 2
                          ? initHomePower.curMonthCarbonCount
                          : initHomePower.curYearCarbonCount
                      }}
                    </div>
                    <div class="colorfff fontSize12 line-height">
                      碳排放(吨)
                    </div>
                    <img class="carbonicon" align="center" src="../../assets/img/carbonicon2.png" />
                  </div>
                  <div class="carbonEmission">
                    <img src="../../assets/img/carbonEmission1.png" />
                  </div>
                </div>
                <div class="positionRelative flex1">
                  <div class="position width90">
                    <div class="fontSize16 color4 line-height">
                      {{
                        active_data == 1
                        ? initHomePower.todayCompareYesterdayPowerRate
                        : active_data == 2
                          ? initHomePower.curMonthCompareLastMonthPowerRate
                          : initHomePower.curYearCompareLastYearPowerRate
                      }}%
                    </div>
                    <div class="colorfff fontSize12 line-height">同比</div>
                    <img class="carbonicon" align="center" src="../../assets/img/carbonicon4.png" />
                  </div>
                  <div class="carbonEmission">
                    <img src="../../assets/img/carbonEmission3.png" />
                  </div>
                </div>
              </div>
              <div class="loadEchartsRight">
                <img src="../../assets/img/carbon_bottom.png" />
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import axios from "axios";
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import { getlListByProdectId } from "../../assets/js/dictionaries";
import warningEchartas from "./warningEchartas.vue";
import api from "../../api/api";
let projectId = Number(localStorage.getItem("projectId"));

export default {
  components: { warningEchartas },
  setup(props, conts) {
    const alarmStatistics = ref(null);
    const active_data = ref(1);
    const isgarden = ref(conts.attrs.isgarden);
    const warningEchartasShow = ref(false);
    const selfAdaption = ref(true);
    // if (isgarden.value == 1) {
    //   let byClass = document.getElementsByClassName("con-right")[0].style;
    //   byClass.position = "fixed";
    //   byClass.zIndex = "999";
    //   byClass.right = "0";
    //   byClass.top = "80px";
    // }
    const previewNum = ref("15422");
    const detail = ref({});
    let userinfo = localStorage.getItem("userInfo");
    let info = JSON.parse(userinfo);
    const ListByProdect = ref([{}]);
    const garden = ref("");
    const scene = ref("");
    const getDetail = (areaCode) => {
      getlListByProdectId().then((res) => {
        selfAdaption.value = true;
        setTimeout(function () {
          warningEchartasShow.value = true;
        }, 200);
        ListByProdect.value = res;
        garden.value = res.length + "";
        scene.value = res.length + 4 + "";
      });
    };
    const generatedEnergy = ref({});
    const getInitGeneratedEnergy = () => {
      api
        .postFormAPI("backup/powerDataInfo/initGeneratedEnergy", {
          devId: "977230",
          dateType: "",
        })
        .then((res) => {
          if (res.data.code == 1) {
            generatedEnergy.value = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getInitGeneratedEnergy();
    const initHomePower = ref({});
    const getinitHomePower = () => {
      api
        .postFormAPI("backup/electricityDataInfo/initHomePower", {
          devId: "84167",
          dateType: "",
        })
        .then((res) => {
          if (res.data.code == 1) {
            initHomePower.value = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getinitHomePower();
    const setIntervalTime = ref(null);
    onMounted(async () => {
      setIntervalTime.value = setInterval(function () {
        if (active_data.value == 1) {
          active_data.value = 2;
        } else if (active_data.value == 2) {
          active_data.value = 3;
        } else {
          active_data.value = 1;
        }
        getDetail();
      }, 3000);
      window.addEventListener("resize", function () {
        warningEchartasShow.value = false;
        selfAdaption.value = false;
        getDetail();
      });
    });
    const buildingList = ref([]);

    const getAllbuild = () => {
      api
        .getListAPI("backup/indexData?projectId=" + projectId, {})
        .then((res) => {
          if (res.data.code == 1) {
            buildingList.value = res.data.data.buildingList;

            getDetail(res.data.data.areaList[0]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getAllbuild();
    const handledata = (index) => {
      active_data.value = index;
      clearInterval(setIntervalTime.value);
    };
    const carousel = ref(null);
    const handleParkOverview = (index) => {
      warningEchartasShow.value = false;
      nextTick(function () {
        warningEchartasShow.value = true;
      },);
      conts.emit("handleParkOverview", carousel.value);
    };
    const getCarousel = () => {
      carousel.value.next();
      warningEchartasShow.value = false;
      nextTick(function () {
        warningEchartasShow.value = true;
      });
    };
    onBeforeUnmount(async () => {
      clearInterval(setIntervalTime.value);
    });
    return {
      buildingList,
      ListByProdect,
      isgarden,
      scene,
      garden,
      previewNum,
      generatedEnergy,
      initHomePower,
      active_data,
      alarmStatistics,
      warningEchartasShow,
      carousel,
      selfAdaption,
      getCarousel,
      handledata,
      handleParkOverview,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common.css";
@import "../../assets/css/geoMap.css";
@import "../../assets/css/style.css";
@import "../../assets/css/home.less";
@import "./module.less";

.cicleName {
  position: relative;
  bottom: 20px;
  color: #fff;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b8d3f1;
  line-height: 34px;
}

.electro-charts {
  position: relative;
  width: 100%;
  height: 100%;
}

.con-right {
  position: relative;
  z-index: 999;
}

.tlbox {
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 1% 2%;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.tlbox p.text {
  padding-left: 3%;
}

.tlbox p.text span {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b8d3f1;
  line-height: 25px;
}

.tlbox .rwith {
  display: flex;
  align-items: center;
  width: 95%;
}

.tlbox .rwith>div {
  width: 80%;
  height: 10px;
  background: #123b6f;
  border-radius: 5px;
  margin: auto;
}

.tlbox .rwith .value {
  margin: 0 5px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #b8d3f1;
}

.tlbox span.rwith_img {
  height: 10px;
  background: #0e6de9;
  border-radius: 5px;
  float: left;
  display: inline-block;
}

.tlboxModel {
  width: 50%;
}

.daterange {
  position: relative;
  padding: 10px 20px;
  margin: 0;
  // height: 30px;
  z-index: 9999;
}

.loadEchartsRight {
  position: relative;
  width: 100%;
  height: 49px;
  margin: 0 auto;
  bottom: 0px;
}

.loadEchartsRight img {
  width: 100%;
}

.button_date_active {
  background: #0e6de9;
}

.button_date {
  background: none !important;
  color: #0e6de9;
}

.model_box {
  width: 90%;
  position: relative;
  height: 75%;
  margin: 0 auto;
  margin-top: 0;
  padding: 0 15px;
  // bottom: 20px;
}

.carbonEmission {
  width: 90px;
  height: 100%;
  position: relative;
  z-index: 9999;
}

.carbonEmission img {
  width: 100%;
  position: relative;
}

.carbonicon {
  width: 28px;
  height: 28px;
  position: relative;
  text-align: center;
  z-index: 999;
  bottom: 5px;
  transform: rotateX(360deg);
  animation: circle1 5s linear infinite;
}

@keyframes circle1 {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(60%);
  }

  100% {
    transform: translateY(0%);
  }
}

.previewNum {
  width: 35px;
  height: 40px;
  background: #0e6de9;
  border-radius: 5px;
  line-height: 40px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-right: 5px;
}

.previewTitle {
  // font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b8d3f1;
  line-height: 14px;
  margin-right: 20px;
}

&:deep(.el-carousel__indicators--horizontal) {
  display: none;
}

&:deep(.el-carousel__container) {
  height: 100%;
  width: 100%;
}

&:deep(.el-carousel--horizontal) {
  height: 100%;
  width: 100%;
}

.right-bottom>.info1 {
  height: 100%;
}

.right-top {
  width: 100%;
  height: 12%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  box-sizing: border-box;
  position: relative;
}

.right-top1 {
  width: 100%;
  height: 24.5%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  box-sizing: border-box;
  position: relative;
  margin: 12px 0;
}

.right-center {
  width: 100%;
  height: 20%;
  margin: 17px 0;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  box-sizing: border-box;
  position: relative;
}

.right-center {
  width: 100%;
  height: 20%;
  margin: 17px 0;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  box-sizing: border-box;
  position: relative;
}

.right-top>.info1,
.right-top1>.info1,
.right-center>.info1,
.right-bottom>.info1 {
  background: url(../../assets/img/model_backg.png) no-repeat;
  background-size: 100% 100%;
  height: calc(100% - 30px);
  /* height: 100%; */
}

.right-bottom {
  width: 100%;
  height: 33.5%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  box-sizing: border-box;
  position: relative;
}

// &:deep(.el-carousel__item) {
//   display: block !important;
//   transform: translateX(0px) scale(1) !important;
// }
</style>
